<template>
    <div class="content">
        <div class="tabs">
            <el-tabs v-model="activeName" type="card" @tab-click="handletabClick">
                <el-tab-pane label="设备诊断" name="active_2">
                    <div class="menu_div">
                        <div class="img25D">
                            <img25D @img25dChangeData="img25dChangeData" ref="img25D1" :iskeep="iskeep"
                                :active="activeName == 'active_2'" />
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="波形频谱图" name="active_1">
                    <div class="menu_div">
                        <div class="menu_content">
                            <div class="chart_top" :class="chart.class1" @click="setActive(1)">
                                <i v-show="chart.class1 === 'chart chart_active' || chart.class1 === 'chart chart_active chart_blow'"
                                    class="iconfont icon-scale-fill" @click="blow_up" title="缩放"
                                    style="z-index: 999; position: absolute; right: 10px; top: 10px"></i>
                                <draw-eig :sensorInfo="sensorInfo" :date_time="date_time" :eigname="eigname"
                                    :contextMenuData="contextMenuData1" :active="activeName === 'active_1'"
                                    @sendTags="getEigTags" @recentTime="recentTime" />
                            </div>

                            <div class="chart_bottom" :class="chart.class2" @click="setActive(2)">
                                <i v-show="chart.class2 === 'chart chart_active' || chart.class2 === 'chart chart_active chart_blow'"
                                    class="iconfont icon-scale-fill" @click="blow_up" title="缩放"
                                    style="z-index: 999; position: absolute; right: 10px; top: 10px"></i>

                                <spec ref="spec" @sendTime="getDomainTime" @sendtagsSelected="getDomainTagSelected"
                                    @showFallWave="showFallWave" @showColorWave="showColorWave"
                                    :contextMenuData="contextMenuData2" :sensorInfo="sensorInfo" :date_time="date_time"
                                    :active="activeName === 'active_1'" />
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane v-if="showAudio" label="音频波形" name="active_3">
                    <audio-wave v-if="activeName === 'active_3'" :sensorInfo="sensorInfo"
                        :date_time="date_time"></audio-wave>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div v-if="activeName === 'active_2'" class="tools">
            <div class="tools_item">
                <i class="iconfont icon-tupian" @click="uploadImg" title="上传2.5D设备图片"
                    style="zindex: 99; font-size: 26px"></i>
                <i class="iconfont icon-baocun" @click="saveGraph" title="保存绘图" style="zindex: 99"></i>
            </div>
        </div>
        <div class="date_time">
            <el-date-picker v-model="date_time" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" align="right"></el-date-picker>
        </div>
        <fall-wave ref="fallWave" :sensorInfo="sensorInfo" :tagSelected="timeDomain.tagsSelected"
            :date_time="date_time" />
        <color-wave ref="colorWave" :sensorInfo="sensorInfo" :tagSelected="timeDomain.tagsSelected"
            :date_time="date_time" />
    </div>
</template>

<script>

import { requestApi } from '@/requset/api'
import img25D from '@/components/img25D'
import trackPage from '@/components/track'
import fallWave from '@/components/fallWave_'
import colorWave from '@/components/colorWave'
import audioWave from '@/components/audioWave'
import drawEig from '@/components/drawEig'
import spec from '@/components/spec'
import { pickerOptions, contextMenuData1, contextMenuData2 } from './config.js'
export default {
    data() {
        return {
            // 时间日期配置
            pickerOptions: null,
            contextMenuData2: null,
            contextMenuData1: null,
            date_time: [new Date(Date.now() - 86400000 * 1), new Date(Date.now())],
            activeName: 'active_1',
            chart: {
                class1: 'chart chart_active',
                class2: 'chart',
            },
            eigenvalue: {
                tags: [],
                tagsSelected: [],
                // 当前传感器的特征值数据
                list: {},
            },
            // 时域相关(图谱分析)
            timeDomain: {
                tags: [],
                tagsSelected: null,
                timeList: [],
                timeSelected: '',
                list: {},
            },
            eigname: "",
            // 可拖动 // 保存
            iskeep: true,
            showAudio: false,
        }
    },
    components: {
        img25D,
        fallWave,
        trackPage,
        drawEig,
        spec,
        colorWave,
        audioWave,
    },
    props: ['father_1', 'father_2'],
    computed: {
        sensorInfo() {
            return this.father_1
        },
        device_id() {
            return this.father_2
        },
    },
    methods: {
        img25dChangeData(id, time) {
            if (time) {
                let time_start = new Date(time).getTime() - 3600 * 1000 * 6
                let time_end = new Date(time).getTime() + 3600 * 1000 * 6
                this.$set(this.date_time, 0, new Date(time_start))
                this.$set(this.date_time, 1, new Date(time_end))
            }
            this.eigenvalue.tagsSelected = this.eigenvalue.tags[3]
            this.activeName = 'active_1'
        },
        // 选中区域
        setActive(e) {
            if (e == 1) {
                if (this.chart.class1.indexOf('chart_active') == -1) {
                    this.chart.class1 = 'chart chart_active'
                    this.chart.class2 = 'chart'
                }
            } else if (e == 2) {
                if (this.chart.class2.indexOf('chart_active') == -1) {
                    this.chart.class2 = 'chart chart_active'
                    this.chart.class1 = 'chart'
                }
            }
        },
        saveGraph() {
            if (this.activeName == 'active_2') this.$refs.img25D1.saveGraph()
        },
        uploadImg() {

            if (this.activeName == 'active_2') this.$refs.img25D1.uploadImg()
        },
        handletabClick(e) {

            if (e.label == "设备诊断")
                this.initImg(this.device_id)
        },
        initImg(id) {
            this.$nextTick(() => {
                this.$refs.img25D1.initImg(id)
            })
        },
        // 放大
        blow_up() {
            if (this.chart.class1 === 'chart chart_active') {
                this.chart.class1 += ' chart_blow'
            } else if (this.chart.class1 === 'chart chart_active chart_blow') {
                this.chart.class1 = 'chart chart_active'
            }
            if (this.chart.class2 === 'chart chart_active') {
                this.chart.class2 += ' chart_blow'
            } else if (this.chart.class2 === 'chart chart_active chart_blow') {
                this.chart.class2 = 'chart chart_active'
            }
        },
        showTrack() {
            this.$refs.trackPage.showTrack()
        },
        // 显示瀑布图
        showFallWave() {
            this.$refs.fallWave.showFallWave()
        },
        showColorWave() {
            this.$refs.colorWave.showColorWave()
        },
        getEigTags(e) {
            this.eigenvalue.tags = e
        },
        getDomainTime(e) {
            this.timeDomain.timeSelected = e
        },
        getDomainTagSelected(e) {
            this.timeDomain.tagsSelected = e
        },
        recentTime(e) {
            this.$refs.spec.changeTimeSelected(e)
        },
    },
    watch: {
        sensorInfo: {
            handler() {
                if (this.sensorInfo) {
                    requestApi('post', 'wave/getAll', { name: this.sensorInfo.port + '_' + this.sensorInfo.address }).then((res) => {
                        this.showAudio = res.data.data.length !== 0
                    })
                }
            },
            deep: true,
        },
    },
    created() {
        this.pickerOptions = pickerOptions
        this.contextMenuData1 = contextMenuData1
        this.contextMenuData2 = contextMenuData2
        this.eigname = this.$route.query.key
        let time = this.$route.query.time
        if (time) {
            let time_start = new Date(time).getTime() - 3600 * 1000 * 6
            let time_end = new Date(time).getTime() + 3600 * 1000 * 6
            this.$set(this.date_time, 0, new Date(time_start))
            this.$set(this.date_time, 1, new Date(time_end))
        }
    },
    beforeDestroy() {
        let PubSub = require('pubsub-js')
        PubSub.clearAllSubscriptions()
    },
}
</script>
<style lang="less" scoped>
.vue-contextmenu-listWrapper {
    background-color: transparent;
    color: #04204c;
    font-size: 18px;
    font-weight: 600;
}

.context-menu-list {
    background-color: #04204c !important;
}

.btn-wrapper-simple {
    background-color: #04204c !important;
}

.content {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;

    .tabs {
        width: 96%;
        left: 2%;
        height: calc(100% - 10px);
        position: absolute;
        top: 10px;

        .menu_div {
            width: 100%;
            height: calc(100vh - 110px);
            position: relative;

            .menu_content {
                position: absolute;
                width: 100%;
                height: 100%;
                bottom: 0;
                left: 0;

                .chart {
                    width: calc(100% - 2px);
                    height: 48%;
                    margin-bottom: 1%;
                    border: 1px solid #4524ed;
                    background-color: #091e49;
                    transition: height 0.1s;
                    border-radius: 4px;

                    .eigenvalue_chart {
                        width: 100%;
                        height: calc(100% - 40px);
                    }

                    .el-select {
                        width: 160px;
                        height: 36px;
                    }

                    .el-input__inner {
                        height: 20px !important;
                    }
                }

                .chart_active {
                    border: 1px solid #0cd9e8;
                    // background-color: red;
                    z-index: 99;
                }

                .chart_blow {
                    height: 98%;
                }

                .chart_bottom {
                    position: absolute;
                    bottom: 0;

                    .el-select {
                        margin-right: 6px;
                    }
                }

                .chart_top {
                    position: absolute;
                    top: 0;
                }
            }

            .img25D {
                width: 100%;
                height: 96%;
                position: absolute;
                left: 0%;
                top: 4%;
            }
        }
    }

    .date_time {
        width: 430px;
        right: 0;
        top: 12px;
        position: absolute;
        height: 40px;
    }

    .tools {
        height: 40px;
        width: 96%;
        top: 50px;
        position: absolute;
        left: 2%;

        .tools_item {
            height: 100%;
            width: 50%;
            float: left;
            display: flex;
            align-items: center;

            i {
                font-size: 22px;
                color: #a5bdde;
                cursor: pointer;
                transition: all 0.4s;
            }

            i:hover {
                color: #0cd9e8;
            }
        }
    }

    .iconfont {
        font-size: 22px;
        color: #a5bdde;
        cursor: pointer;
        transition: all 0.4s;
    }

    .iconfont:hover {
        color: #0cd9e8;
    }
}
</style>
